<template>
  <svg :class="svgClass" @click="click" aria-hidden="true" :font-size="size">
    <use :href="iconName" />
  </svg>
</template>

<script lang="ts" setup>
  import { computed, toRefs } from 'vue'
  const props = defineProps({
    iconClass: {
      type: String,
      default: '',
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '',
    },
  })
  //使用父组件传递过来的值
  const { iconClass, className } = toRefs(props)
  const emits = defineEmits(['svgclick'])
  const iconName = computed(() => {
    return `#icon-${iconClass?.value}`
  })
  const svgClass = computed(() => {
    return className?.value ? `svg-icon${className.value}` : `svg-icon`
  })
  const click = () => {
    emits('svgclick')
  }
</script>

<style scoped lang="scss">
  .svg-icon {
    width: 1.5em;
    height: 1.5em;
    // vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    display: block;
  }
</style>
